<template>
    <h1>水果列表</h1>
    <div v-for="fruit in fruits" :key="fruit.id">
        <ul>
            <li>
                水果编号：{{ fruit.id }} --- 
                水果名称：{{ fruit.name }} ---
                详细信息：{{ fruit.deatil }}

            </li>
        </ul>
       
    </div>
</template>
<script>
export default{
    data() {
        return{
            fruits:[{
                id: 1,
                name: '苹果',
                deatil: '苹果汁水丰富，可以生津止渴。'
            },
            {
                id: 2,
                name: '柠檬',
                deatil: '柠檬具有生津止渴、化痰止咳的功效。'
            }
        ]
                
            
        }
    }

}
    
</script>